<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import echarts from 'echarts'

    require('echarts-wordcloud')
    require('echarts/theme/macarons');// echarts theme
    import {debounce} from '@/utils'

    export default {
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '300px'
            }
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.initChart();
            this.__resizeHandler = debounce(() => {
                if (this.chart) {
                    this.chart.resize()
                }
            }, 100);
            window.addEventListener('resize', this.__resizeHandler)
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            window.removeEventListener('resize', this.__resizeHandler);
            this.chart.dispose();
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons');
                const data = [{
                    'name': '花鸟市场',
                    'value': 1446
                },
                    {
                        'name': '汽车',
                        'value': 928
                    },
                    {
                        'name': '视频',
                        'value': 906
                    },
                    {
                        'name': '电视',
                        'value': 825
                    },
                    {
                        'name': 'Lover Boy',
                        'value': 514
                    },
                    {
                        'name': '动漫',
                        'value': 486
                    },
                    {
                        'name': '音乐',
                        'value': 53
                    },
                    {
                        'name': '直播',
                        'value': 163
                    },
                    {
                        'name': '广播电台',
                        'value': 86
                    },
                    {
                        'name': '戏曲曲艺',
                        'value': 17
                    },
                    {
                        'name': '演出票务',
                        'value': 6
                    },
                    {
                        'name': '给陌生的你听',
                        'value': 1
                    },
                    {
                        'name': '资讯',
                        'value': 1437
                    },
                    {
                        'name': '商业财经',
                        'value': 422
                    },
                    {
                        'name': '娱乐八卦',
                        'value': 353
                    },
                    {
                        'name': '军事',
                        'value': 331
                    },
                    {
                        'name': '科技资讯',
                        'value': 313
                    },
                    {
                        'name': '社会时政',
                        'value': 307
                    },
                    {
                        'name': '时尚',
                        'value': 43
                    },
                    {
                        'name': '网络奇闻',
                        'value': 15
                    },
                    {
                        'name': '旅游出行',
                        'value': 438
                    },
                    {
                        'name': '景点类型',
                        'value': 957
                    },
                    {
                        'name': '国内游',
                        'value': 927
                    },
                    {
                        'name': '远途出行方式',
                        'value': 908
                    },
                    {
                        'name': '酒店',
                        'value': 693
                    },
                    {
                        'name': '关注景点',
                        'value': 611
                    },
                    {
                        'name': '旅游网站偏好',
                        'value': 512
                    },
                    {
                        'name': '出国游',
                        'value': 382
                    }];
                this.chart.setOption({
                    backgroundColor: '#fff',
                    tooltip: {
                        show: false
                    },
                    series: [{
                        type: 'wordCloud',
                        gridSize: 1,
                        sizeRange: [12, 55],
                        rotationRange: [-45, 0, 45, 90],
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' +
                                        Math.round(Math.random() * 255) +
                                        ', ' + Math.round(Math.random() * 255) +
                                        ', ' + Math.round(Math.random() * 255) + ')'
                                }
                            }
                        },
                        left: 'center',
                        top: 'center',
                        right: null,
                        bottom: null,
                        data: data
                    }]
                })
            }
        }
    }
</script>
